<template>
  <el-dialog
    :title="dialogTitle"
    :visible.sync="dialogVisible"
    width="25%"
    :close-on-click-modal="false"
    :before-close="handleClose"
  >
    <el-form
      :model="quickForm"
      ref="quickForm"
      :rules="rules"
      label-width="100px"
    >
      <el-form-item label="名称" prop="quickName">
        <el-input
          v-model="quickForm.quickName"
          placeholder="请输入名称"
        ></el-input>
      </el-form-item>
      <el-form-item label="排序值:">
        <el-input
          v-model.number="quickForm.quickSort"
          placeholder="请输入排序值"
        />
      </el-form-item>
      <el-form-item label="备注:">
        <el-input
          type="textarea"
          rows="3"
          v-model="quickForm.quickRemark"
          placeholder="请输入备注"
        ></el-input>
      </el-form-item>
      <el-form-item label="启用状态">
        <EnabledSwitch :value.sync="quickForm.isEnabled" />
      </el-form-item>
    </el-form>

    <span slot="footer" class="dialog-footer">
      <el-button @click="handleClose">取 消</el-button>
      <el-button type="primary" :loading="loading" @click="handleConfirm"
        >确 定</el-button
      >
    </span>
  </el-dialog>
</template>
<script>
import EnabledSwitch from "@/components/EnabledSwitch/index.vue";

import {
  quickQueryDetail,
  quickQueryAdd,
  quickQueryEdit,
} from "@/api/quick-query";

export default {
  name: "AddEditModel",
  components: {
    EnabledSwitch,
  },
  props: {
    title: {
      type: String,
      default: () => "",
    },
    visible: {
      type: Boolean,
      default: () => false,
    },
    rowId: {
      type: Number,
      default: () => null,
    },
  },
  computed: {
    dialogTitle: {
      get() {
        return this.title;
      },
    },
    dialogVisible: {
      get() {
        return this.visible;
      },
    },
  },
  data() {
    return {
      quickForm: null,
      initForm: {
        id: void 0,
        quickName: "",
        quickRemark: "",
        quickSort: 100,
        isEnabled: 1,
      },
      rules: {
        quickName: [
          { required: true, message: "请输入名称", trigger: "blur, change" },
        ],
      },
      loading: false,
    };
  },
  watch: {
    rowId: {
      handler(val) {
        if (!val) return;

        this.loadDetail(val);
      },
    },
  },
  created() {
    this.quickForm = { ...this.initForm };
  },
  methods: {
    // 加载详情
    async loadDetail(rowId) {
      const res = await quickQueryDetail(rowId);
      if (!res.data) this.handleClose();
      this.quickForm = res.data;
    },

    // 提交数据
    handleConfirm() {
      this.$refs.quickForm.validate(async (valid) => {
        if (valid) {
          try {
            this.loading = true;
            if (!this.rowId) {
              await quickQueryAdd(this.quickForm);
              this.handleClose();
            } else {
              await quickQueryEdit(this.quickForm);
              this.handleClose();
            }
            this.$emit("reloadData");
          } catch (e) {
            this.loading = false;
          }
        } else {
          console.log("error submit!!");
          this.loading = false;
          return false;
        }
      });
    },

    // 关闭
    handleClose() {
      this.$emit("update:rowId", null);
      this.$emit("update:title", null);
      this.$emit("update:visible", false);
      this.loading = false;
      this.quickForm = { ...this.initForm };
      this.$refs.quickForm.resetFields();
    },
  },
};
</script>
<style lang="scss" scoped></style>
